<template>
    <div id="container">
      <div class="header">
      </div>
      <div class="weui-grids" v-if="functionList.length >0">
        <router-link class="weui-grid js_grid" :to='{name:"schedule"}' v-if="checkAppFunction('schedule')">
          <div class="weui-grid__icon">
            <span class="fa-stack fa-lg richeng">
               <!--<span class="badge">5</span>-->
              <i class="fa fa-square fa-stack-2x"></i>
              <i class="fa fa-calendar fa-stack-1x fa-inverse"></i>
            </span>
          </div>
          <p class="weui-grid__label">
            日程安排
          </p>
        </router-link>
        <router-link class="weui-grid js_grid" :to='{name:"project"}' v-if="checkAppFunction('project')">
          <div class="weui-grid__icon">
            <span class="fa-stack fa-lg" style="color: #29abe2">
               <!--<span class="badge">5</span>-->
              <i class="fa fa-square fa-stack-2x"></i>
              <i class="fa fa-th fa-stack-1x fa-inverse"></i>
            </span>
          </div>
          <p class="weui-grid__label">
            招商项目
          </p>
        </router-link>
        <router-link class="weui-grid js_grid" :to="{name: 'asset'}" v-if="checkAppFunction('assets')">
          <div class="weui-grid__icon">
            <span class="fa-stack fa-lg kejizaiti">
              <i class="fa fa-square fa-stack-2x"></i>
              <i class="fa fa-magnet fa-stack-1x fa-inverse"></i>
            </span>
          </div>
          <p class="weui-grid__label">
            载体信息
          </p>
        </router-link>
        <router-link class="weui-grid js_grid" :to='{name:"policy"}' v-if="checkAppFunction('policy')">
          <div class="weui-grid__icon">
            <span class="fa-stack fa-lg" style="color: #cc0000">
               <!--<span class="badge">5</span>-->
              <i class="fa fa-square fa-stack-2x"></i>
              <i class="fa fa-file-text fa-stack-1x fa-inverse"></i>
            </span>
          </div>
          <p class="weui-grid__label">
            政策文件
          </p>
        </router-link>
        <router-link class="weui-grid js_grid" :to='{name:"flow"}' v-if="checkAppFunction('flow')">
          <div class="weui-grid__icon">
            <span class="fa-stack fa-lg" style="color: #1aad19">
               <!--<span class="badge">5</span>-->
              <i class="fa fa-square fa-stack-2x"></i>
              <i class="fa fa-sitemap fa-stack-1x fa-inverse"></i>
            </span>
          </div>
          <p class="weui-grid__label">
            企业流程
          </p>
        </router-link>
        <router-link class="weui-grid js_grid" :to='{name:"resource"}'  v-if="checkAppFunction('resource')">
          <div class="weui-grid__icon">
            <span class="fa-stack fa-lg" style="color:#18C195;">
               <!--<span class="badge">5</span>-->
              <i class="fa fa-square fa-stack-2x"></i>
              <i class="fa fa-tint fa-stack-1x fa-inverse"></i>
            </span>
          </div>
          <p class="weui-grid__label">
            资源管理
          </p>
        </router-link>
        <router-link class="weui-grid js_grid" :to="{name: 'receiverDisk'}" v-if="checkAppFunction('receiverDisk')">
          <div class="weui-grid__icon">
            <span class="fa-stack fa-lg" style="color: #cc0000">
              <i class="fa fa-square fa-stack-2x"></i>
              <i class="fa fa-list-alt fa-stack-1x fa-inverse"></i>
            </span>
          </div>
          <p class="weui-grid__label">
            下发文件
          </p>
        </router-link>
        <router-link class="weui-grid js_grid" :to="{name: 'disk'}" v-if="checkAppFunction('disk')">
          <div class="weui-grid__icon">
            <span class="fa-stack fa-lg wendang">
              <i class="fa fa-square fa-stack-2x"></i>
              <i class="fa fa-cloud fa-stack-1x fa-inverse"></i>
            </span>
          </div>
          <p class="weui-grid__label">
            云盘
          </p>
        </router-link>
        <router-link class="weui-grid js_grid" :to='{name:"businessTrip"}' v-if="checkAppFunction('trip')">
          <div class="weui-grid__icon">
            <span class="fa-stack fa-lg" style="color: #ff6600">
               <!--<span class="badge">5</span>-->
              <i class="fa fa-square fa-stack-2x"></i>
              <i class="fa fa-plane fa-stack-1x fa-inverse"></i>
            </span>
          </div>
          <p class="weui-grid__label">
            出差管理
          </p>
        </router-link>

        <router-link class="weui-grid js_grid" :to='{name:"addresslist"}'v-if="checkAppFunction('address')">
          <div class="weui-grid__icon">
            <span class="fa-stack fa-lg tongxun">
              <i class="fa fa-square fa-stack-2x"></i>
              <i class="fa fa-address-book fa-stack-1x fa-inverse"></i>
            </span>
          </div>
          <p class="weui-grid__label">
            通讯录
          </p>
        </router-link>


        <router-link class="weui-grid js_grid" :to='{name:"document"}' v-if="checkAppFunction('document')">
          <div class="weui-grid__icon">
            <span class="fa-stack fa-lg richeng">
              <i class="fa fa-square fa-stack-2x"></i>
              <i class="fa fa-clipboard fa-stack-1x fa-inverse"></i>
            </span>
          </div>
          <p class="weui-grid__label">
            文件管理
          </p>
        </router-link>


        <router-link class="weui-grid js_grid" :to="{name: 'room'}" v-if="checkAppFunction('meetingRoom')">
          <div class="weui-grid__icon">
            <span class="fa-stack fa-lg yuding">
              <i class="fa fa-square fa-stack-2x"></i>
              <i class="fa fa-pencil-square fa-stack-1x fa-inverse"></i>
            </span>
          </div>
          <p class="weui-grid__label">
            会议室预定
          </p>
        </router-link>

      </div>
      <div>

      </div>
    </div>
</template>
<script>
  import fetch from '../utils/fetch'
export default {
    name: 'home',
    data() {
      return {
        functionList:[]
      }
    },
    components:{
    },
    methods:{
      handleGetFunctions(){
        fetch('/api/function/list').then(response =>{
          if(response.data.success){
            this.functionList = response.data.obj
          }
        })
      },
      checkAppFunction(code){
        if (this.functionList.length > 0){
          for(let item in this.functionList) {
            if(this.functionList[item].code === code){
              return true
            }
          }
          return false
        } else {
          return false
        }
      }
    },
    created(){
      this.handleGetFunctions()
    }

  }
</script>

<style lang="scss" scoped>
  @import '../../static/css/weui.css';
  @import '../base/css/_base';
  #container{
    padding-bottom: 1.111rem;
    .header{
      height: 5.0rem;
      background: url() no-repeat center/cover;
      @include dpr-img('../assets/', 'swiper4');
      text-align: center;
      .title {
        color: #fff;
        font-weight: 700;
        @include fz(10px);
        font-family: SimHei;
        background: #000;
        opacity: 0.8;
        padding: 10px 0;
      }
    }
  }

  .tongzhi, .wendang {
    color: #4DA9EC;
  }
  .qlan {
     color: #74C9F0;
  }
  .richeng{
    color: #FA871D;
  }
  .kejizaiti{
    color:#18C195;
  }
  .tongxun{
    color: #F76E61;
  }
  .yuding{
    color: #9B89B9;
  }

  .weui-grid__icon+.weui-grid__label {
    margin-top: 15px;
  }

  .weui-grid__label {
    text-align: center;
    font-size: 12px;
  }
  .weui-grid__icon{
    text-align: center;
  }
  .badge{
    position: absolute;
    transform: translateX(50%);
    top: -10px;
    right: 0;
    height: 20px;
    border-radius: 10px;
    width: 20px;
    background: #ed3f14;
    border: 1px solid transparent;
    color: #fff;
    line-height: 18px;
    text-align: center;
    font-size: 12px;
    white-space: nowrap;
    transform-origin: -10% center;
    z-index: 10;
    box-shadow: 0 0 0 1px #fff;
  }
</style>
